<template>
  <view class="main">
    <view>
      <u-tabs :list="tnavList" @click="menuClick" :current="current" :scrollable="false" :activeStyle="activeStyle"
        :inactiveStyle="inactiveStyle" :itemStyle="itemStyle">
      </u-tabs>
    </view>
    <form class="form">
      <view v-if="fundShow" class="form_item mt20">
        <view class="title">公积金贷款(万元)</view>
        <input name="input" type="number" placeholder="请输入贷款金额" maxlength="4" v-model="loansCount" />
      </view>
      <view v-if="businessShow" class="form_item">
        <view class="title">商业贷款(万元)</view>
        <input name="input" type="number" placeholder="请输入贷款金额" maxlength="4" v-model="businessCount" />
      </view>
      <view v-if="fundShow" class="form_item">
        <view class="title">公积金利率(%)</view>
        <picker @change="rateChange" :value="rateIndex" :range="loansRate" range-key="name">
          <view class="picker flex_align">
            {{ rateIndex > -1 ? loansRate[rateIndex].name : '请选择' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view v-if="businessShow" class="form_item">
        <view class="title">商业利率(%)</view>
        <picker @change="businessChange" :value="businessIndex" :range="businessRate" range-key="name">
          <view class="picker flex_align">
            {{ businessIndex > -1 ? businessRate[businessIndex].name : '请选择' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view v-if="rateShow" class="form_item">
        <view class="title">自定义公积金利率(%)</view>
        <input name="input" type="number" maxlength="4" placeholder="请输入贷款利率" v-model="yourRate" />
      </view>
      <view v-if="yourBusinessShow" class="form_item">
        <view class="title">自定义商业利率(%)</view>
        <input name="input" type="number" maxlength="4" placeholder="请输入贷款利率" v-model="yourBusiness" />
      </view>
      <view class="form_item">
        <view class="title">按揭年数</view>
        <picker @change="yearChange" :value="yearIndex" :range="mortgageYear" range-key="name">
          <view class="picker flex_align">
            {{ yearIndex > -1 ? mortgageYear[yearIndex].name : '请选择' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">还款方式</view>
        <picker @change="refundChange" :value="refundIndex" :range="refundWay" range-key="name">
          <view class="picker flex_align">
            {{ refundIndex > -1 ? refundWay[refundIndex].name : '请选择' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
    </form>
    <view v-if="resultShow" class="result mt30">
      <view class="tax-title">
        <text>
          计算结果：
        </text>
      </view>
      <view class="tax-text">
        <text>
          每月月供参考(元)
        </text>
        <text>
          {{ homePrice }}
        </text>
      </view>
      <view class="tax-title mt50">
        <text v-if="refundType == 0">
          等额本息：
        </text>
        <text v-if="refundType == 1">
          等额本金：
        </text>
      </view>
      <view class="overdue-text mt30">
        <text v-if="refundType == 0">还款期内，每月偿还同等数额的贷款(包括本金和利息)。</text>
        <text v-if="refundType == 1">还款期内把贷款数总额等分，每月偿还同等数额的本金和剩余贷款在该月所产生的利息，随着时间的推移每月还款数也越来越少</text>
      </view>
    </view>
    <view class="footer">
      <view class="bottom-btn">
        <view class="reset-btn" @click="resetBtn">
          重 置
        </view>
        <view class="count-btn" @click="countBtn">
          计 算
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/fd/index"></script>

<style lang="scss" scoped>
.main {
  min-height: 90vh;
  overflow-y: auto;
  background-color: #f1f1f1;


  .result {
    padding: 0 30rpx;

    .tax-title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333;
    }

    .tax-text {
      margin-top: 30rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .overdue-text {
      display: flex;
      flex-direction: column;
      line-height: 56rpx;
      font-size: 32rpx;
    }
  }

  .form {
    .form_item {
      background-color: #ffffff;
      padding: 2rpx 30rpx;
      min-height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 160rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .bottom-btn {
      padding: 0 30rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .reset-btn {
        width: 220rpx;
        height: 90rpx;
        background-color: #f6f6f6;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
      }

      .count-btn {
        width: 440rpx;
        height: 90rpx;
        background-color: #2979ff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}
</style>

